<template>
	<!-- 02家长注册确认绑定 -->
	<view>	
 		<!-- 自定义导航栏 -->
 		<view class="navBarBox">
 			<!-- 状态栏占位 -->
 			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
 			<!-- 真正的导航栏内容 -->
 			<view class="navBar">
 				<view class="goback">
 					<view @click="goBack" class="goicon" style="background:url('../../../static/goback.png');background-size:contain;background-repeat: no-repeat;">			
 					</view>
 				</view>
 				<view class="titlen">绑定学生</view>
 				<view class="right"> 
 				</view>
 			</view>
 		</view>
		
		<view class="black-strip"></view>
		<!-- 学生信息 -->
		<view class="studentMsg pl">
			<view class="title">
				<view class="common-tit">
					<text>学生信息</text>
				</view>
			</view>
			<view class="msg">
				<view class="identity-card common1">
					<text class="tit1">学生姓名</text>
					<text class="tit2">{{studentMsg.sname}}</text>
				</view>
				<view class="identity-card common1">
					<text class="tit1">学生身份证</text>
					<text class="tit2">{{studentMsg.sidCard}}</text>
				</view>
				<view class="sex common1">
					<text class="tit1">性别</text>
					<text class="tit2" v-if="studentMsg.sex==0">男</text>
					<text class="tit2" v-else="studentMsg.sex==1">女</text>
				</view>
				<view class="address common1">
					<text class="tit1">地区</text>
					<text class="tit2 qiequ">{{studentMsg.sarea}}</text>
				</view>
				<view class="should common1">
					<text class="tit1">就读学校</text>
					<text class="tit2">{{studentMsg.sschool}}</text>
				</view>
				<view class="class common1">
					<text class="tit1">就读班级</text>
					<text class="tit2">{{studentMsg.sclass}}</text>
				</view>
			</view>
		</view>
		<view class="black-strip"></view>
		<!-- 家属及联系 -->
		<view class="relation pl">
			<view class="title">
				<view class="common-tit">
					<text>我是:</text>
				</view>
			</view>
			<view class="relations">
				<radio-group @change="radioChange" class="flw">
					<view v-for="(item, index) in items" :key="item.value" class="fld">
						<view>
							<radio color="#46f1de" :value="item.name" :checked="index === current" class="radio-size"/>
						</view>
						<view class="txt-size">{{item.name}}</view>
					</view>
				</radio-group>
			</view>
			<view class="fl mobile">
				<text>联系电话</text>
				<input type="number" v-model="phone" class="mobile1"/>
			</view>
		</view>
		<!-- 确认绑定 -->
		<view class="sure-binding">
			<button type="default" hover-class="button-hover" @click="goParentMain">确认绑定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				call:null,
				studentMsg:null,
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82+11,
				// 选择的学生信息
				// studentMsg:{
				// 	studentName: '周小花',
				// 	identityCard: '511602199902220318',
				// 	sex: '男',
				// 	address: '四川省武侯区吉泰五路88号香年广场T2-3101',
				// 	should: '东风小学',
				// 	class: '一年级1班'
				// },
				items: [{
							value: '0',
							name: '爸爸'
						},
						{
							value: '1',
							name: '妈妈',
						},
						{
							value: '2',
							name: '爷爷'
						},
						{
							value: '3',
							name: '奶奶'
						}
					],
				current: 0,
				// 联系电话
				phone: ''
			}
		},
		methods: {
			goBack(){
				// 此处是写返回页面的方法、
							
				uni.navigateBack({
					delta: 1//返回只上一级页面
				});
			},
			goParentMain(){
				uni.navigateTo({
					url:'../../parentpages/parentMain'
				})
			},
			radioChange(evt) {
				this.call=evt.detail.value
				console.log(evt)
			}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.studentMsg=uni.getStorageSync('parentData')
			console.log(this.studentMsg)
		},
	}
</script>

<style lang="less">
	 .navBarBox .navBar {
	 	padding: 3rpx 50rpx;
	 	padding-bottom: 8rpx;
	 	display: flex;
	 	justify-content: space-between;
	 	line-height: 93rpx;
	 	font-size: 40rpx;
	 }
	 	
	 .goback {
	 	flex: 1;
	 	height: 100%;
	 }
	 .goicon{
	 	width: 30rpx;
	 	height: 30rpx;
	 	background-color: #00BEA9;
	 	margin-top: 30rpx;
	 }
	 .titlen {
	 	font-size: 40rpx;
	 	flex: 2;
	 	height: 100%;
	 	
	 }
	 .right{
	 	flex: 1;
	 }
	 
	.black-strip {
		height: 20rpx;
		background-color: #fafafa;
	}
	.pl {
		padding-left: 30rpx;
	}
	.studentMsg {
		height: 778rpx;
		background-color: #fff;
	}
	.title {
		height: 118rpx;
		display: flex;
		align-items: center;
	}
	.common-tit {
		height: 24rpx;
		background-color: #a2f8ee;
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			font-size:38rpx;
		}
	}
	.msg {
		margin-top: 18rpx;
		padding-left: 76rpx;
	}
	.common1 {
		height: 104rpx;
		display: flex;
		.tit1 {
			width: 220rpx;
			color: rgba(18, 18, 18, .5);
			font-size: 32rpx;
		}
		.tit2 {
			width: 338rpx;
			font-size: 32rpx;
			color: rgb(18, 18, 18);
		}
	}
	.qiequ {
		height: 104rpx;
		overflow: hidden;
		overflow:auto;
	}
	// 选择家属
	.relations {
		margin-top: 18rpx;
		width: 584rpx;
		margin-left: 76rpx;
	}
	.flw{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.fld {
		display: flex;
		align-items: center;
		
	}
	.radio-size {
		transform: scale(0.7);
	}
	.txt-size {
		font-size: 28rpx;
	}
	// 联系电话
	.mobile {
		margin-top: 110rpx;
		height: 94rpx;
		border-bottom: 2rpx solid rgb(225, 225, 225);
		text {
			font-size: 32rpx;
			color: rgb(18, 18, 18);
		}
		.mobile1 {
			font-size: 28rpx;
			color: #7d7d7d;
			padding-left: 80rpx;
		}
	}
	.sure-binding {
		height: 174rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		button {
			width: 228rpx;
			height: 70rpx;
			color: #fff;
			background-color: #2db3fe;
			box-shadow: 0 0 20rpx 3rpx rgba(180,226,251);
			font-size: 28rpx;
		}
	}
	.button-hover[type="default"] {
		color: #fff;
		background-color: #118ace;
	}
</style>
